<template>
  <view class="wrapForm">
    <view class="bgLine"></view>
    <view class="wrapFormBody pL15 pR15 pT15 myInfoForm">
      <view class="searchBox bgf">
        <u-search
          placeholder="搜索"
          v-model="query.realName"
          height="80"
          :show-action="false"
          bg-color="#F8F8F8"
          shape="square"
          @search="search"
        >
        </u-search>
      </view>
      <mescroll-uni
        class="lisBox"
        ref="mescrollRef"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
        :down="downOption"
        :up="upOption"
        :bottombar="false"
        :top="160"
      >
        <view style="padding-bottom: 140rpx">
          <view class="flex pL15 pR15 mB10" v-for="(item, i) in list">
            <view class="nameBox">
              {{ getFirst(item?.realName) }}
            </view>
            <view
              class="rightPhone mL15 u-border-bottom pB10 flex jst-between alg-center"
            >
              <view>
                <view class="font16 bold flex alg-center">
                  <view>{{ item?.realName }}</view>
                  <view class="tag">已认证</view>
                </view>
                <view class="u-6 font13 mT5">{{ item?.userPhoneNo }}</view>
              </view>
              <view class="addBtn" @click="delUser(item)">解除</view>
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
    <xfTipModal ref="tipModal"></xfTipModal>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import {
  queryMyBoundBroker,
  deleteRelationship,
} from "@/api/companyInterface/user.js";
export default {
  mixins: [MescrollMixin],

  data() {
    return {
      downOption: {
        use: true,
        auto: false,
      },
      query: {
        realName: "",
        pageSize: 10,
        pageNo: 1,
      },
      upOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        empty: {
          use: true,
          icon: "/static/image/nodata.png",
          tip: "暂无数据",
          fixed: true,
        },
        textNoMore: "到底啦~",
      },
      list: [],
    };
  },
  onShow(e) {
    this.mescroll && this.mescroll.triggerDownScroll();
  },
  methods: {
    getFirst(v) {
      return v ? v.slice(0, 1) : "";
    },
    search() {
      this.list = [];
      this.mescroll.resetUpScroll();
    },
    delUser(v) {
      let that = this;
      this.$refs.tipModal.open({
        content: "确认解除与" + v.realName + "的经纪人关系吗?",
        btntext: "解除",
        showCancel: true,
        success: function () {
          deleteRelationship({ id: v.id }).then((res) => {
            uni.showToast({
              icon: "none",
              title: "解除成功",
              duration: 2000,
            });
            setTimeout(() => {
              that.list = [];
              that.mescroll.resetUpScroll();
            }, 2000);
          });
        },
      });
    },
    async upCallback(page) {
      if (page.num == 1) this.list = [];
      this.query.pageNo = page.num;

      queryMyBoundBroker(this.query)
        .then((res) => {
          let list = res.result.records;
          this.list = this.list.concat(list);
          this.mescroll.endSuccess(res.result.records.length);
        })
        .catch((err) => {
          this.mescroll.endByPage(0, 0);
          this.mescroll.endSuccess(1);
          this.mescroll.endErr();
        });
    },
  },
};
</script>
<style lang="scss">
page {
  min-height: 100%;
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.wrapForm {
  height: 100%;

  .wrapFormBody {
    margin-top: -30rpx;
    border-radius: 40rpx 40rpx 0 0;
    background: #fff;
  }

  .nameBox {
    width: 90rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    background: #eceffe;
    color: #3291f8;
    font-size: 32rpx;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
  }

  .rightPhone {
    width: calc(100% - 120rpx);
  }
}

.bgLine {
  background-color: #ebf0ff;
  width: 100%;
  height: 60rpx;
}

.bottomW {
  position: fixed;
  bottom: 40rpx;
  width: 100%;
  left: 0;
}

.addBtn {
  color: #3291f8;
  height: 50rpx;
  line-height: 48rpx;
  border-radius: 50rpx;
  padding: 0 30rpx;
  font-size: 26rpx;
  border: 2rpx solid #3291f8;
}

.rightNowPay {
  width: 670rpx;
  height: 100rpx;
  line-height: 100rpx;
  background: #3291f8;
  border-radius: 30rpx;
}

.tag{
  border-radius: 6rpx;
  border: 2rpx solid #3291F8;
  margin-left: 14rpx;
  font-size: 22rpx;
  color: #3291F8;
  width: 84rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
